<template>
	<Form label-position="top">
        <FormItem label="间距设置">
        	<div class="ui-slider-group">
        		<div class="label">顶部外边距</div>
        		<div class="box">
        			<Slider :max="50" v-model="value.margin"></Slider>
        		</div>
        	</div>
        	<div class="ui-slider-group">
        		<div class="label">上下间距</div>
        		<div class="box">
        			<Slider :max="50" v-model="value.paddingy"></Slider>
        		</div>
        	</div>
        	<div class="ui-slider-group">
        		<div class="label">左右间距</div>
        		<div class="box">
        			<Slider :max="50" v-model="value.paddingx"></Slider>
        		</div>
        	</div>
        </FormItem>
        <FormItem label="按钮文字">
            <Input v-model="value.text" placeholder="请输入按钮文字"></Input>
        </FormItem>
        <FormItem label="文字颜色">
            <ColorPicker v-model="value.color" placement="bottom-start"></ColorPicker>
            <span style="margin-left: 10px; color: #999;">请选择文字颜色</span>
        </FormItem>
        <FormItem label="背景颜色">
            <ColorPicker v-model="value.bgcolor" placement="bottom-start"></ColorPicker>
            <span style="margin-left: 10px; color: #999;">请选择背景填充色</span>
        </FormItem>
        <div class="ui-slider-group">
    		<div class="label">按钮高度</div>
    		<div class="box">
    			<Slider :min="18" :max="50" v-model="value.height"></Slider>
    		</div>
    	</div>
    	<div class="ui-slider-group">
    		<div class="label">按钮圆角</div>
    		<div class="box">
    			<Slider :max="20" v-model="value.radius"></Slider>
    		</div>
    	</div>
   	</Form>
</template>

<script>
export default {
	name: 'btnConfig',
	props: {
		value: Object
	}
}
</script>

<style>
</style>